<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="./cardListRemove.css">
		<link rel="stylesheet" href="../swiper8/swiper-bundle.css">
		<script src="../swiper8/swiper-bundle.min.js"></script>
		<script src="../js/jquery-3.6.0.min.js"></script>
		<!-- 引入动画 -->
		<link rel="stylesheet" href="../AOS-animations/aos.css">
		<script src="../AOS-animations/aos.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- PC端导航栏开始 -->
			<div class="nav">
				<div class="navLogo"><img src="../img/logo-top.png" alt=""></div>
				<div class="navText">
					<img id="more" src="../img/more.png" alt="">
					<ul id="down">
						<a href="#">
							<li>首页</li>
						</a>
						<a href="#">
							<li>红馆简介</li>
						</a>
						<a href="#">
							<li>所获荣誉</li>
						</a>
						<a href="#">
							<li>校外基地</li>
						</a>
						<a href="#">
							<li>红色社团</li>
						</a>
					</ul>
				</div>
			</div>
			<div class="banner">
				<div class="swiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="../img/stimulate.png"></div>
						<div class="swiper-slide"><img src="../img/in-depthStudy.jpg"></div>
						<div class="swiper-slide"><img src="../img/schoolScenery.jpg"></div>
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="introduction">
				<div class="introductionNav">
					<div class="introductionNavAll">
						<div class="introductionNavAllTop">
							<p>快速导航</p>
							<p>Quick navgation</p>
						</div>
						<div class="introductionNavAllBottom">
							<p>红馆简介</p>
						</div>
					</div>
				</div>
				<div class="introductionMore">
					<div class="jianjie">
						<div class="introductionMoreTop">
							<div class="introductionMoreTopText">
								<div class="moreList">
									<img src="../img/fanren.png" alt="">
								</div>
								<p>红馆简介</p>
							</div>
							<div class="introductionMoreTopMain">
								当前位置： 首页 | 红馆简介
							</div>
						</div>
						<div class="clover">
							<img id="listCard" src="../img/firstXuanzhong.png" alt="">
							<img id="listPictrue" src="../img/secondWeixuanzhpng.png" alt="">
							<img id="listText" src="../img/thirdWeixuanzhong.png" alt="">
						</div>
						
						
						
						<div class="show">
							<div class="introductionMain">
								<div class="introductionMainBox">
									<img src="../img/douyin.jpg" alt="">
									<p>多年来充分发挥职业教育的特点，大力推进特色教育</p>
									<p><img src="../img/zhong.png" alt="">2022-02-17</p>
								</div>
								<div class="introductionMainBox">
									<img src="../img/douyin.jpg" alt="">
									<p>多年来充分发挥职业教育的特点，大力推进特色教育</p>
									<p><img src="../img/zhong.png" alt="">2022-02-17</p>
								</div>
								<div class="introductionMainBox">
									<img src="../img/douyin.jpg" alt="">
									<p>多年来充分发挥职业教育的特点，大力推进特色教育</p>
								<p><img src="../img/zhong.png" alt="">2022-02-17</p>
								</div>
								<div class="introductionMainBox">
									<img src="../img/douyin.jpg" alt="">
									<p>多年来充分发挥职业教育的特点，大力推进特色教育</p>
									<p><img src="../img/zhong.png" alt="">2022-02-17</p>
								</div>
							</div>
						</div>
						
						
						
						
						<div class="hide">
							<div class="introductionMain">
								<div class="introductionMainBox">
									<div class="introductionImg">
										<img src="../img/douyin.jpg" alt="">
									</div>
						
									<div class="intromationText">
										<p>多年来充分发挥职业教育的特点，大力推进特色教育</p>
										<p>⌚2022-02-17</p>
									</div>
								</div>
								<div class="introductionMainBox">
									<div class="introductionImg">
										<img src="../img/douyin.jpg" alt="">
									</div>
									<div class="intromationText">
										<p>多年来充分发挥职业教育的特点，大力推进特色教育</p>
										<p>⌚2022-02-17</p>
									</div>
								</div>
								<div class="introductionMainBox">
									<div class="introductionImg">
										<img src="../img/douyin.jpg" alt="">
									</div>
									<div class="intromationText">
										<p>多年来充分发挥职业教育的特点，大力推进特色教育</p>
										<p>⌚2022-02-17</p>
									</div>
								</div>
								<div class="introductionMainBox">
									<div class="introductionImg">
										<img src="../img/douyin.jpg" alt="">
									</div>
									<div class="intromationText">
										<p>多年来充分发挥职业教育的特点，大力推进特色教育</p>
										<p>⌚2022-02-17</p>
									</div>
								</div>
							</div>
						</div>
						
						
						<!-- 文字列表 -->
						<div class="listText">
							<ul class="listContent">
								<li>
									<div class="listTextmain"><span></span>山东城院召开公文写作培训会</div>
									<div class="listTextTime">2021-11-19</div>
								</li>
								<li>
									<div class="listTextmain"><span></span>关于报送2022年部门重点工作和日常工作的通知</div>
									<div class="listTextTime">2021-11-19</div>
								</li>
								<li>
									<div class="listTextmain"><span></span>速读山东城院年度工作报告</div>
									<div class="listTextTime">2021-11-19</div>
								</li>
								<li>
									<div class="listTextmain"><span></span>中国共产党山东省城市服务技师学院第一届委员会第五次全体会议公报</div>
									<div class="listTextTime">2021-11-19</div>
								</li>
							</ul>
						</div>
						
						
						
						
						<div class="lookMore">
							<a href="#">查看更多></a>
						</div>
					</div>
				</div>
			</div>

			<div class="footer">
				<div class="main">
					<div class="footLogo">
						<img src="../img/logo-top.png" alt="">
					</div>
					<div class="change">
						<div class="footDetails">
							<div class="footDetailsTitle">联系我们</div>
							<div class="footText">
								<p>办&nbsp;&nbsp;公&nbsp;&nbsp;室</p>
								<p>:</p>
								<p>0539-5916215</p>
							</div>
							<div class="footText">
								<p>招生资讯</p>
								<p>:</p>
								<p>0539-5916215</p>
							</div>
							<div class="footText">
								<p>官&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网</p>
								<p>:</p>
								<p>www.sdcc.edu.cn</p>
							</div>
							<div class="footText">
								<p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</p>
								<p>:</p>
								<p>sdccxy@126.com</p>
							</div>
							<div class="footText">
								<p>校&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址</p>
								<p>:</p>
								<p>山东省烟台市高新区海天路1001号</p>
							</div>
						</div>
			
						<div class="footContack" id="weCat">
							<div class="wecat">
								<img src="../img/weCat.png" id="weCat" alt="">
								<p>官方微信</p>
							</div>
						</div>
					</div>
				</div>
				<div class="stop">
					Copyright O山东省城市服务技师学院版权所有
				</div>
			</div>
		</div>
	</body>
	<script>
		//红馆简介中的卡片列表和图文列表的显示和隐藏
		$(document).ready(function() {
			$('#listCard').click(function() {
				var listCard = $(this).parent('.clover').siblings('.show')
				var listPictrue = $(this).parent('.clover').siblings('.hide')
				var listText = $(this).parent('.clover').siblings('.listText')
				
				var activeSE = $(this).siblings('#listPictrue')
				var activeTh = $(this).siblings('#listText')
				if (listCard.show()) {
					$(this).attr('src','../img/firstXuanzhong.png')
					activeSE.attr('src','../img/secondWeixuanzhpng.png')
					activeTh.attr('src','../img/thirdWeixuanzhong.png')
					
					listPictrue.hide()
					listText.hide()
				}
				// else {
					
				// }
			})
		
			$('#listPictrue').click(function() {
				var listCard = $(this).parent('.clover').siblings('.show')
				var listPictrue = $(this).parent('.clover').siblings('.hide')
				var listText = $(this).parent('.clover').siblings('.listText')
				
				var activeFi = $(this).siblings('#listCard')
				var activeTh = $(this).siblings('#listText')
				if (listPictrue.show()) {
					activeFi.attr('src','../img/firstWeixuanz.png')
					$(this).attr('src','../img/secondXuanzhong.png')
					activeTh.attr('src','../img/thirdWeixuanzhong.png')
					
					listCard.hide()
					listText.hide()
				}
				//  else {
				// 	listCard.show()
				// }
			})
			// listText
			$('#listText').click(function() {
				var listCard = $(this).parent('.clover').siblings('.show')
				var listPictrue = $(this).parent('.clover').siblings('.hide')
				var listText = $(this).parent('.clover').siblings('.listText')
				
				var activeFi = $(this).siblings('#listCard')
				var activeSE = $(this).siblings('#listPictrue')
				if (listText.show()) {
					$(this).attr('src','../img/thirdXuanzhong.png')
					activeFi.attr('src','../img/firstWeixuanz.png')
					activeSE.attr('src','../img/secondWeixuanzhpng.png')
					
					listCard.hide()
					listPictrue.hide()
				}
				// else {
				// 	listCard.show()
				// }
			})
		})
		
		
		
		
		
		// 轮播图开始
		var mySwiper = new Swiper('.swiper', {
			autoplay: {
				delay: 3000,
				stopOnLastSlide: false,
				disableOnInteraction: false,
			},
			effect: 'slide', //图片切换方式淡入
			loop: true, // 循环模式选项
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
				clickable: true, //点击分页器指示点可以切换banner图
			},
			// 如果需要前进后退按钮
			navigation: {
				clickable: true,
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		})
		// 轮播图结束
		$(document).ready(function() {
			$(".holdLeft").hover(function() {
				$(this).find(".overlay").css({
					display: "block"
				})
			}, function() {
				$(this).find(".overlay").css({
					display: "none"
				})
			})
		})

		$('.overlayNext').hide(); // 隐藏样式
		$(document).ready(function() {
			$(".societyContent").hover(function() {
				$(this).find(".overlayNext").css({
					display: "flex"
				})
			}, function() {
				$(this).find(".overlayNext").css({
					display: "none"
				})
			})
		})
		// 动画
		// AOS.init({
		// 	duration: 1200,
		// })
		// 显示及隐藏导航栏
		$(function() {
			// 绑定按钮点击事件
			$('#more').click(function() {
				// 获取 div 元素
				var more = $(this).siblings("ul");

				if (more.is(':visible')) {
					// 如果元素当前是可见状态，则隐藏它
					more.slideUp();
				} else {
					// 如果元素当前是隐藏状态，则显示它
					more.slideDown();
				}
			});
		});
		$(function() {
			$('#down').click(function() {
				$(this).slideUp()
			})
		})
		//显示隐藏微信和微博
		// $(document).ready(function() {
		//   $('.box').hover(
		//     function() {
		//       $(this).find('img').show();
		//     },
		//     function() {
		//       $(this).find('img').hide();
		//     }
		//   );
		// });
	</script>
</html>